<template>
  <div>
    <el-container>
  
    <!-- 标题 -->
    <el-header>
    <div class='title'>
      <span class='iconfont iconfeiji'></span>
      <h2>国内机票</h2>
    </div>
    </el-header>
    <!-- 主内容 -->
    <el-main>
  <el-row>
  <el-col :span="9">
  <div class="grid-content bg-purple reverses">
    <!-- 搜索栏目 -->
  <el-tabs type="border-card">
   <el-tab-pane>
    <span slot="label"><i class="iconfont icondancheng"></i>单程</span>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label='出发城市'>
        <el-autocomplete
          v-model="form.departCity"
          :fetch-suggestions="querySearchDeparture"
          placeholder="请输入出发城市"
          @select="DepartureCity"
          @search="handleSearch"
          :trigger-on-focus="false"
          :highlight-first-item	="true"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label='目的城市'>
        <el-autocomplete
          v-model="form.destCity"
          :fetch-suggestions="querySearchArrive"
          @select="ArriveCity"
          placeholder="请输入目的城市"
          :trigger-on-focus="false"
          :highlight-first-item	="true"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label='选择日期'>
        <el-date-picker
      v-model="form.departDate"
      @change="getDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="SearchCity"> <i class='el-icon-search'></i> 搜索</el-button>
    </el-form-item>
</el-form>
  </el-tab-pane>
  <el-tab-pane :disabled="true">
    <span slot="label"><i class="iconfont iconshuangxiang"></i>往返</span>
    消息中心
    </el-tab-pane>
  </el-tabs>
  <div class='reverse'>
    <span @click="handleReverse">换</span>
  </div>
  </div></el-col>
  <el-col :span="15"><div class="grid-content bg-purple-light">
    <img src="http://157.122.54.189:9093/images/pic_sale.jpeg">
    </div></el-col>
</el-row>
<el-row class='programa-col'>
  <el-col :span="8">
    <div class="grid-content bg-purple programa programa-right">
     <span><i class="iconfont iconweibiaoti-_huabanfuben"></i>100%航协认证</span>
    </div>
    </el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple-light programa programa-right">
      <span><i class="iconfont iconbaozheng"></i>出行保证</span>
      </div>
      </el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple programa">
            <span><i class="iconfont icondianhua"></i>7x24小时服务</span>
      </div>
      </el-col>
</el-row>
<div class='sale'>
  <h2><i class='iconfont icontejiajipiao'></i> 特价机票</h2>
</div>
<el-row class='Special'>
  <el-col :span="6" v-for="(item,index) in SpecialList" :key="index"><div class="grid-content bg-purple Speciallist" >
    <nuxt-link :to="{path:'/air/flights',query:item}">
      <img :src="item.cover" alt="">
    </nuxt-link>
    <div class='air-ticket'>
      <span>{{item.departCity}}-{{item.destCity}}</span>
      <span>${{item.price}}</span>
    </div>
    </div></el-col>
</el-row>
    </el-main>
  </el-container>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      form: {
        departCity: '',
        departCode: '',
        destCity: '',
        destCode: '',
        departDate: ''
      },
      SpecialList: []
    }
  },
  methods: {
    // 将获取城市列表的功能封装
    getCityList(value) {
      return this.$axios({
        url: '/airs/city',
        method: 'get',
        params: {
          name: value
        }
      }).then(res => {
        // console.log(res.data)
        const { data } = res.data
        const oldData = data.map(item => {
          return {
            // 城市名
            value: item.name.replace(/市$/, ''),
            // 城市代码
            sort: item.sort
          }
        })
        // 数据来源于第三方 有些城市可能没有sort号码 我们将数据再改造一次
        // filter 方法可以将你想符合要求的数据返回 符合就是true
        const newData = oldData.filter(item => {
          return item.sort
        })
        // 因为我们需要将数据展示在搜索框里面 所以把数据return出去
        return newData
      })
    },
    // 远程搜索建议
    // 里面有两个参数 一个是用户输入的值 一个是调用远程建议的回调函数
    querySearchDeparture(value, callback) {
      setTimeout(() => {
        // 获取城市数据
        this.getCityList(value).then(newData => {
          // console.log(newData)
          // 优化城市选择 用户如果输入匹配不到的城市 应该告诉用户没有该城市
          // 城市数据的选项大于0时就是代表有数据 没有就是0
          if (newData.length > 0) {
            // 每当搜索数据建议出现时 默认将第一项内容放入form表单里面
            this.form.departCode = newData[0].sort
            // console.log(this.form)
            callback(newData)
          } else {
            callback([
              {
                value: '没有该城市'
              }
            ])
          }
        })
      }, 3000)
    },
    querySearchArrive(value, callback) {
      this.getCityList(value).then(newData => {
        this.form.destCode = newData[0].sort
        callback(newData)
      })
    },
    // 出发城市选项触发
    DepartureCity(item) {
      // console.log(item)
      // 将选到的城市代码存进 form表单里面的 departCity 里面
      // this.form.departCode = item.value
      this.form.departCode = item.sort
    },
    // 目的城市选项触发
    ArriveCity(item) {
      // 将选到的城市代码存进 form表单里面的 destCity里面
      // this.form.destCode = item.value
      this.form.destCode = item.sort
    },
    handleSearch(value) {
      console.log(value)
    },
    // 获取时间
    getDate(value) {
      // console.log(value)
      // 使用moment第三方插件将时间格式改成我们想要的
      // 改造完数据之后放入表单即可
      this.form.departDate = moment(value).format('yyyy-MM-DD')
    },
    // 点击切换城市位置
    handleReverse() {
      // console.log(123)
      // 先将出发城市存起来
      const oldcity = this.form.departCity
      const oldsort = this.form.departCode
      this.form.departCity = this.form.destCity
      this.form.departCode = this.form.destCode

      this.form.destCity = oldcity
      this.form.destCode = oldsort
    },
    // 获取特价机票
    loadSpecialTicket() {
      this.$axios({
        url: '/airs/sale',
        methos: 'get'
      }).then(res => {
        console.log(res.data)
        const { data } = res.data
        this.SpecialList = data
      })
    },
    // 点击搜索触发事件
    SearchCity() {
      // 假如数据为空 就不能发送请求
      if (
        !this.form.departCity ||
        !this.form.destCity ||
        !this.form.departDate
      ) {
        this.$message({
          message: '请选择城市',
          type: 'success'
        })
        return
      }
      // 发送前再次判断 如果用户搜索里面的城市没有城市的code 就默认将列表的第一项数据填入
      if (!this.form.departCode && this.form.departCity) {
        this.getCityList(this.form.departCity).then(res => {
          this.form.departCode = res[0].sort
        })
      }

      if (!this.form.destCode && this.form.destCity) {
        this.form.destCode = this.getCityList(this.form.destCity).then(res => {
          return res[0].sort
        })
      }
      // console.log(this.form)
      // 用户输入的城市名字我们要在发送前做处理 将 市 字处理
      // const reg = new RegExp('市', 'g')
      // 点击搜素的时候处理掉用户的会被看到 这里做一个定时器
      setTimeout(() => {
        this.form.departCity = this.form.departCity.replace(/市$/, '')
        this.form.destCity = this.form.destCity.replace(/市$/, '')
      }, 1500)
      // console.log(this.form)
      // 发送数据到机票详情页面 跳转之后再发请求 路由query属性可以将数据携带
      // return
      this.$store.commit('history/depositList', this.form)
      this.$router.push({
        path: '/air/flights',
        query: this.form
      })
    }
  },
  mounted() {
    this.loadSpecialTicket()
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 1000px;
  margin: 0 auto;
  .el-main {
    padding: 0;
  }
  .el-header {
    padding: 0;
  }
  .el-input {
    width: 202px;
  }
  .bg-purple {
    padding-right: 20px;
    .el-button {
      width: 202px;
      margin: 0 auto;
    }
  }
  .Special {
    border: 1px solid #dddddd;
    height: 182px;
    margin: 10px 0;
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    .el-col {
      width: 225px;
    }
    .Speciallist {
      overflow: hidden;
      height: 140px;
      position: relative;
      padding: 0;
      .air-ticket {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30px;
        padding: 0 10px;
        color: #ffffff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 100%;
      }
    }
  }
  .reverses {
    position: relative;
    .reverse {
      width: 25px;
      height: 64px;
      position: absolute;
      right: 52px;
      top: 74px;
      border: 1px solid #cccccc;
      border-left: none;
      position: absolute;
      span {
        font-size: 10px;
        padding: 2px 3px;
        position: absolute;
        top: 20px;
        right: -10px;
        background-color: #999999;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  .programa {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .programa-right {
    border-right: 1px solid grey;
  }
  .programa-col {
    padding: 15px 0;
    border: 1px solid #dddddd;
    margin: 10px 0;
    background-color: #f5f5f5;
  }
  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    color: skyblue;
    .iconfeiji {
      font-size: 25px;
      margin-right: 5px;
    }
  }
  .el-tabs {
    // width: 360px;
    height: 350px;
    ::v-deep.el-tabs__nav {
      display: flex;
      width: 100%;
      .el-tabs__item {
        flex: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>